嗨咿我是illumi，今天來講最簡單最快看到成果的酷酷東西吧！如果你想要在網頁上放動畫，你可能會選擇以下這些格式：

其中，Lottie（JSON 格式），最高可減小到GIF 格式 600 分之一的體積大小！在LottieFiles 官網也有提供很多動畫可以使用。雖然已經很多教學文章了，不過這邊還是會補充一些我踩過的坑供大家避開。現在就開始今天的手把手教學吧～

Step 1. 搜尋動畫

1. 進入 LottieFiles 官網。
   
2. 在搜尋欄輸入關鍵字，例如：
   • loading → 常見的等待圈圈
   • success → 打勾成功動畫
   • error / warning → 系統提示動畫
   • button → 互動小元件
   • emoji / character → 表情或小人物
   • ui / icon → 常用 UI 元素

👉 小技巧：

• 搜索結果可以切換「Free」篩選，只看免費動畫。
• 大部分 UI 動畫都能直接商用，但還是要注意授權標示。

Step 2. 編輯動畫（可跳過）

找到想要的動畫 → 點進去 → 選鉛筆icon。

在編輯器裡能做的事：

• 改顏色（選某個圖層 → 換色）
• 刪除元素
• 改長寬 Dimension
• 改時長 Duration
• 改幀數Frame rate

⚠️ 注意限制：

• 不能新增元素（無法多畫一個圖層）。
• 不能更換素材（不能加圖片或文字）。
• 只能「修改既有」的內容。

Step 3. 儲存動畫

不管有沒有編輯，都一定要按「Save」才能拿到動畫。

• 會存到你 LottieFiles 的帳號（需要先登入）。
• 選擇一個資料夾來存（沒開會員只有10個可以存）
• 你可以選擇：
  • Download （下載下來自己放網頁）
  • Handoff（不用下載，直接貼上Code），必須打開CDN按鈕
• Code中可能會看到<dotlottie-wc> 或是 <lottie-player> 等等，差別也幫你整理在下面啦！

Step 4. 安裝與網頁使用

雖然他右下角這裡看起來很像純粹的資訊，但要按照你寫的語言點開來看啊，每個都是按鈕！

按照裡面程式碼貼上就可以獲得可愛動畫～

如果動畫出不來，也許是專案中有什麼其他會擋的壞份子，這部分下次展開説說。

但我想要自己做專屬的動畫怎麼辦呢？動畫師可能會想說我都有AE了，為什麼還要這個呢？請看下集待續！